<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apolonia Slider</title>
</head>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="horisontalTabsAccordion/css/tabs-acordion-horisontal.css"/>
<link rel="stylesheet" type="text/css" href="horisontalTabsAccordion/css/navigation.css"/>
<link rel="stylesheet" type="text/css" href="content/css/content.css"/>
<link rel="stylesheet" type="text/css" href="css/clearfix.css"/>

<script type="text/javascript" src="horisontalTabsAccordion/js/jquery.tools.min.js"></script>
<script type="text/javascript" src="horisontalTabsAccordion/js/buttons.js"></script>
<script type="text/javascript" src="content/js/pager.js"></script>
<body>
	<div id="content" class="clearfix">
    	<!-- Page 1 -->
    	<div>
            <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
            <img src="content/images/ordinacija1.jpg" />
        </div>
        
        <!-- Page 2 -->
        <div>
            <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
            <img src="content/images/ordinacija2.jpg" />
        </div>
        
        <!-- Page 3 -->
        <div>
            <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
            <img src="content/images/ordinacija3.jpg" />
        </div>
        
        <!-- Page 4 -->
        <div>
            <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
            <img src="content/images/ordinacija4.jpg" />
        </div>
    </div>
	<div id="navigation" class="clarfix">
        <div id="accordion">
            <!-- 1st header and pane -->
            <img src="horisontalTabsAccordion/images/button1.jpg" />
            <div style="width: 250px; display:block"><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>
            
            <!-- 2nd header and pane -->
            <img src="horisontalTabsAccordion/images/button2.jpg" />
            <div><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>
            
            <!-- 3rd header and pane -->
            <img src="horisontalTabsAccordion/images/button3.jpg" />
            <div><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>
            
            <!-- 4th header and pane -->
            <img src="horisontalTabsAccordion/images/button4.jpg" />
            <div><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>
        </div>
        <div id="buttons">
            <a href="#" class="btn-prev"><div class="previous-icon"></div></a>
            <a href="#" class="btn-next"><div class="next-icon"></div></a>
        </div>
	</div>
    
    <script type="text/javascript">
		$("#accordion").tabs("#accordion div", {
		  tabs: 'img',
		  effect: 'horizontal'
		});
	</script>
</body>
</html>
